```jsx
import * as carousel from "@zag-js/carousel"
import { normalizeProps, useMachine } from "@zag-js/react"

const items = [
  "https://tinyurl.com/5b6ka8jd",
  "https://tinyurl.com/7rmccdn5",
  "https://tinyurl.com/59jxz9uu",
]

export function Carousel() {
  const service = useMachine(carousel.machine, {
    id: "1",
    slideCount: items.length,
  })

  const api = carousel.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <div {...api.getControlProps()}>
        <button {...api.getPrevTriggerProps()}>Prev</button>
        <button {...api.getNextTriggerProps()}>Next</button>
      </div>
      <div {...api.getItemGroupProps()}>
        {items.map((image, index) => (
          <div {...api.getItemProps({ index })} key={index}>
            <img
              src={image}
              alt=""
              style={{ height: "300px", width: "100%", objectFit: "cover" }}
            />
          </div>
        ))}
      </div>
      <div {...api.getIndicatorGroupProps()}>
        {api.pageSnapPoints.map((_, index) => (
          <button {...api.getIndicatorProps({ index })} key={index} />
        ))}
      </div>
    </div>
  )
}
```
